共计 1485 个字符，预计需要花费 4 分钟才能阅读完成。
提醒：本文最后更新于 2024-08-29 14:32，文中所关联的信息可能已发生改变，请知悉！
- 帮憨憨室友做创新实践作业
- 用 JavaScript 不一定要学 JavaScript 系列
- 文末有完整源码和数据集的链接
获取高德地图 API
请自行百度
编写 head
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2018 年 12 月 1 日 -PM2.5 情况 </title>
<style>
html,
body,
#container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>编写 body
调用 API
<script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key= 你的 key"></script>
<script src="//webapi.amap.com/loca?v=1.3.2&key= 你的 key"></script>导入 csv 数据集
$.get('china5a2.csv', function (data) 设置地图参数
var map = new AMap.Map('container', {
mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536',
zoom: 4,
center: [107.4976, 32.1697],
features: ['bg', 'road'],
// Loca 自 1.2.0 起 viewMode 模式默认为 3D，如需 2D 模式，请显示配置。// viewMode: '3D'
}给定经纬度和 PM2.5 指数
layer.setData(data, {
// lnglat: ' 经纬度 ',
// lnglat: ['lon', 'lat'],
// 或者使用回调函数构造经纬度坐标
lnglat: function (obj) {
var value = obj.value;
var lnglat = [value[' 经度 '], value[' 纬度 ']];
return lnglat;
},
// 指定数据类型
type: 'csv'
});
layer.setOptions({
style: {
// 圆形半径，单位像素
radius: function (obj) {
var value = obj.value;
var lnglat = value['pm25'] * 0.1;
return lnglat*0.2;
},
// 填充颜色
// color: '#5DFBF9',
color: 'red',
// 描边颜色
borderColor: 'red',
// 描边宽度，单位像素
borderWidth: 1,
// 透明度 [0-1]
opacity: 1,
}
});效果图
使用鼠标滚轮可以放大缩小，放大后细节很多，但由于数据集有些大，看起来会与点卡
源码链接
https://github.com/Chaos-xBug/map_pm2.5
有用就给个 star 吧
正文完
